<template>
    <div class="search-content">
        <el-input placeholder="搜索游戏/攻略/用户" :prefix-icon="Search" clearable @focus="showSuggestions = true"
            v-model="searchKeyword" @blur="handleSearchBlur" @input="handleInput"
            @keydown.enter="hadnleSearch"><el-icon>
                <Search />
            </el-icon>
        </el-input>

        <!-- 搜索建议 -->
        <transition name="fade">
            <div v-if="showSuggestions" class="search-suggestions">
                <!-- 新增搜索结果展示 -->
                <div v-if="searchKeyword" class="search-results">
                    <div class="header">搜索结果</div>
                    <div class="items">
                        <div class="result-item" v-for="(item, index) in SearchSuggestions" :key="index"
                            @click="selectOne(item)">
                            {{ item.title || item }} <!-- 根据实际数据结构调整 -->
                        </div>
                    </div>
                </div>

                <!-- 原有建议列表增加v-else条件 -->
                <template v-if="!searchKeyword">
                    <!-- 最近搜索 -->
                    <div class="recent-searches">
                        <div class="header">
                            <span>最近搜索</span>
                            <el-link type="primary" @click="clearRecentSearches">清空</el-link>
                        </div>
                        <div class="items">
                            <div class="item" v-for="(item, index) in recentSearches" :key="index"
                                @click="selectOne(item)">
                                {{ item }}
                            </div>
                        </div>
                    </div>

                    <!-- 热榜搜索 -->
                    <div v-if="!searchKeyword" class="hot-searches">
                        <div class="header">
                            <svg>
                                <path
                                    d="M13 9.01821C13 11.7696 10.7614 14.0001 8 14.0001C5.23858 14.0001 3 11.7696 3 9.01821C3 6.82051 4.04748 6.05314 5.12359 4.93805C6.1997 3.82295 5.79337 2.06683 6.50101 2.00273C7.44799 1.91695 9.70065 3.86121 9.61456 6.67755C10.0163 6.40592 10.2889 5.17646 10.9202 5.36231C12.2259 5.94845 13 7.33074 13 9.01821Z"
                                    fill="#FF3F4C"></path>
                            </svg>

                            <span>热榜搜索</span>
                        </div>
                        <div class="items">
                            <div class="hot-item" v-for="(item, index) in hotSearches" :key="index"
                                @click="selectOne(item)">
                                {{ item }}
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </transition>
        <div v-if="loading" class="loading">
            <span>加载中...</span>
        </div>

    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue';
import service from '@/utils/request';
import { useRouter } from 'vue-router';

const router = useRouter()
const showSuggestions = ref(false);
const SearchSuggestions = ref([])
const searchKeyword = ref('')
const loading = ref(false); // 新增加载状态
const props = defineProps({
    recentSearches: {
        type: Array,
        default: () => []
    },
    hotSearches: {
        type: Array,
        default: () => []
    }
});
const selectOne = (item) => {
    // 根据数据结构获取显示文本
    const searchValue = typeof item === 'object' ? item.title : item;
    searchKeyword.value = searchValue;  // 修正为获取实际文本内容
    showSuggestions.value = false;
};
/**
 * 清空最近搜索
 */
const clearRecentSearches = () => {
    recentSearches.value = [];
};

/**
 * 处理搜索框失去焦点事件
 */
const handleSearchBlur = () => {
    setTimeout(() => {
        showSuggestions.value = false;
    }, 200); // 延迟关闭以避免点击建议项时立即关闭
};

const Getkeywords = async () => {
    if (!searchKeyword.value.trim()) {
        SearchSuggestions.value = [];
        return;
    }
    try {
        loading.value = true
        const res = await service.get('/search/searchValue', { params: { keyword: searchKeyword.value } })
        if (res.code === 200) {
            SearchSuggestions.value = res.data;
        }
    } catch {

    } finally {
        loading.value = false
    }


}

const handleInput = () => {
    Getkeywords();
}

const hadnleSearch = () => {
    router.push({
        name: "searchDetail",
        query: {
            q: searchKeyword.value
        }
    })

    showSuggestions.value = false
}

onMounted(() => {

})
</script>

<style lang="scss" scoped>
$primary-color: #409eff;

.search-content {
    :deep(.el-input__wrapper) {
        padding: 2px 15px;
        height: 35px;
        width: 300px;
    }

    /* 搜索建议容器样式 */
    .search-suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        width: 400px;
        max-height: 400px;
        overflow-y: auto;
        background-color: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        z-index: 1000;
        margin-top: 8px;
        padding: 10px;

        /* 最近搜索样式 */
        .recent-searches {
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 0;
                font-size: 14px;
                color: #606266;
                border-bottom: 1px solid #ebeef5;
                margin-bottom: 8px;

                .el-link {
                    font-size: 12px;
                    text-decoration: none; // 移除下划线

                }
            }

            /* 搜索项样式 */
            .items {
                display: flex; // 使用flex布局
                flex-wrap: wrap; // 允许换行
                gap: 8px; // 设置项之间的间距

                .item {
                    white-space: nowrap; // 防止文本换行
                    padding: 8px 12px;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s;
                    font-size: 14px;
                    color: #606266;

                    &:hover {
                        background-color: #f5f7fa;
                        color: $primary-color;
                    }
                }
            }
        }

        /* 热榜搜索样式 */
        .hot-searches {
            background-color: #f5f7fa;
            border-radius: 4px;
            padding: 12px; // 增加内边距

            .header {
                display: flex;
                align-items: center;
                gap: 3px; // 图标与文字间距
                margin-bottom: 12px;
                font-size: 14px;
                color: #606266;
                font-weight: 500;

                svg {
                    width: 16px; // 设置SVG图标大小
                    height: 16px;
                    fill: #ff3f4c; // 使用SVG的fill属性设置颜色
                    margin-right: 4px; // 调整图标与文字的间距
                }
            }

            .items {
                display: flex;
                flex-direction: column;
                gap: 8px;

                .hot-item {
                    padding: 8px 12px;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s;
                    font-size: 14px;
                    color: #606266;
                    background-color: transparent;

                    &:hover {
                        background-color: rgba($primary-color, 0.1);
                        color: $primary-color;
                    }
                }
            }
        }

        /* 最近搜索和热榜搜索之间的分隔 */
        .hot-searches {
            margin-top: 16px;
        }
    }
}

// 新增搜索结果样式（保持与原有风格一致）
.search-results {
    .header {
        padding: 8px 0;
        font-size: 14px;
        color: #606266;
        border-bottom: 1px solid #ebeef5;
        margin-bottom: 8px;
    }

    .result-item {
        padding: 8px 12px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        color: #606266;

        &:hover {
            background-color: #f5f7fa;
            color: $primary-color;
        }
    }
}
</style>